<template>
  <div>
     <nav class="navbar navbar-light">
      <div class="container">
        <a class="navbar-brand" href="index.html">conduit</a>
        <ul class="nav navbar-nav pull-xs-right">
          <li class="nav-item">
            <nuxt-link
              class="nav-link"
              to="/"
              exact
            >Home</nuxt-link>
          </li>
          <template v-if="user">
          <li  class="nav-item">
                          <nuxt-link
                class="nav-link"
                to="/editor"
              >
              <i class="ion-compose"></i>&nbsp;New Post
            </nuxt-link>
          </li>
          <li class="nav-item">
                          <nuxt-link
              class="nav-link"
              to="/setting"
              exact
            ><i class="ion-gear-a"></i>&nbsp;Settings</nuxt-link>

          </li>
          </template>
          <template v-else>
          <li class="nav-item">
              <nuxt-link class="nav-link" to="/register">Sign up</nuxt-link>
          </li>
          <li class="nav-item">
            <nuxt-link class="nav-link" to="/login">Sign in</nuxt-link>
          </li> 
          </template>
         
        </ul>
      </div>
    </nav>
    <nuxt />
    <footer>
      <div class="container">
        <nuxt-link class="logo-font" to="/">conduit</nuxt-link>
        <span class="attribution">
          An interactive learning project from
          <a href="https://kaiwu.lagou.com/">lagou</a>. Code &amp; design
          licensed under MIT.
        </span>
      </div>
    </footer>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'LayoutIndex',
    computed: {
    ...mapState(['user'])
  }
}
</script>
<style>
</style>